<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"/>

        <q-toolbar-title>
          公主连结Box统计工具
        </q-toolbar-title>

        <div>v1.0.2</div>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      content-class="bg-grey-1" >
      <q-list>
        <q-item-label
          header
          class="text-grey-8">
          功能表
        </q-item-label>
        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          v-bind="link"
        />
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import EssentialLink from 'components/EssentialLink.vue'

const linksData = [
  {
    title: '主页',
    caption: '工具主页',
    icon: 'home',
    link: '/'
  },
  {
    title: '账户',
    caption: '我的账户信息',
    icon: 'mdi-account',
    link: '/account'
  },
  {
    title: '行会',
    caption: '我的行会信息',
    icon: 'mdi-account-group',
    link: '/guild'
  },
  {
    title: 'Box统计工具',
    caption: '用于设定自己的box',
    icon: 'mdi-inbox',
    link: '/box'
  },
  {
    title: '分刀工具',
    caption: '自动计算自己当天可出的刀的组合',
    icon: 'mdi-knife',
    link: '/team-calculate'
  }
];

export default {
  name: 'MainLayout',
  components: { EssentialLink },
  data () {
    return {
      leftDrawerOpen: false,
      essentialLinks: linksData
    }
  }
}
</script>
